import React from "react";
import { Carousel, Icon } from "antd";
require("./swiper.scss");
require("STATIC/style/common.scss")
class Setting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      swiperObj: React.createRef(),
      dotPosition: "top",
      imgArr: [
        {
          url:
            "http://react-video.test.upcdn.net/img/%E5%8A%AB1.jpg"
        },
        {
          url:
            "http://react-video.test.upcdn.net/img/%E5%8A%AB2.jpeg"
        }
      ]
    };
  }
  render(h) {
    const { dotPosition } = this.state.dotPosition;
    let list=()=>{
      let res = [];
      for(let i=0;i<9;i++){
        let domObj = <p key={i}>{i}{i<6?'ss':'aa'}</p>
        res.push(domObj)
      }
      return res;
    }
    return (
      <div>
      <div className="relative">
        <Carousel effect="fade" dotPosition={dotPosition} speed="2000" autoplay ref={this.state.swiperObj}>
          {this.state.imgArr.map((item, index) => {
            return (
              <div className={`swiperDiv`} key={index}>
                <img src={item["url"]} alt="" />
              </div>
            );
          })}
        </Carousel>
        {/* 左右切换按钮 */}
        <div className={`flex flexB absolute widthAll swiperButtonIcon`}>
          <Icon type="left-circle" onClick={this.left.bind(this)} />
          <Icon type="right-circle" onClick={this.right.bind(this)} />
        </div>
      </div>
        {list()}
      </div>
    );
  }
  left() {
    // 点击上一张
    this.state.swiperObj.current.prev();
  }
  right() {
    // 点击下一张
    this.state.swiperObj.current.next();
  }
}

export default Setting;
